<template>
  <div class="home-container">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <h2 class="title">欢迎来到首页</h2>
          <div class="user-info">
            <el-button type="primary" @click="logout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main class="main-content">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>用户信息</span>
            </div>
          </template>
          <div class="user-profile">
            <el-descriptions :column="1" size="large">
              <el-descriptions-item label="手机号">
                {{ userPhone }}
              </el-descriptions-item>
              <el-descriptions-item label="登录时间">
                {{ loginTime }}
              </el-descriptions-item>
              <el-descriptions-item label="Token状态">
                <el-tag type="success">已认证</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <el-icon><Reading /></el-icon>
              <span>图书列表</span>
            </div>
          </template>
          <div class="book-list-container">
            <el-form :inline="true" :model="searchForm" class="search-form">
              <el-form-item label="书名">
                <el-input v-model="searchForm.title" placeholder="请输入书名"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="searchForm.author" placeholder="请输入作者"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="books" style="width: 100%" v-loading="loading">
              <el-table-column prop="id" label="ID" width="60"></el-table-column>
              <el-table-column prop="title" label="书名"></el-table-column>
              <el-table-column prop="author" label="作者"></el-table-column>
              <el-table-column prop="isbn" label="ISBN"></el-table-column>
              <el-table-column prop="category" label="分类"></el-table-column>
              <el-table-column prop="stock" label="库存" width="80"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            </el-table>

            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            ></el-pagination>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { SwitchButton, User, Setting, Reading } from "@element-plus/icons-vue";
import type { BookVO, BookPageQuery, PageResult } from "../type/api";
import { bookApi } from "../api/book";

const router = useRouter();
const userPhone = ref("");
const loginTime = ref("");
const loading = ref(false); // 加载状态

// 图书列表数据和总数
const books = ref<BookVO[]>([]);
const total = ref(0);

// 查询参数
const query = reactive<BookPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 搜索表单数据
const searchForm = reactive({
  title: "",
  author: "",
});

// 获取图书列表
const getBookList = async () => {
  loading.value = true;
  try {
    // 合并搜索表单和分页参数
    const params = { ...query, ...searchForm };
    const res = await bookApi.queryBookPage(params);
    if (res.code === 0) {
      const pageResult: PageResult<BookVO> = res.data;
      books.value = pageResult.list;
      total.value = pageResult.total;
    } else {
      ElMessage.error(res.msg || "获取图书列表失败");
    }
  } catch (e) {
    ElMessage.error("请求图书列表失败，请稍后再试");
  } finally {
    loading.value = false;
  }
};

// 处理页码改变
const handleCurrentChange = (val: number) => {
  query.pageNum = val;
  getBookList();
};

// 处理每页显示数量改变
const handleSizeChange = (val: number) => {
  query.pageSize = val;
  query.pageNum = 1; // 切换每页大小时重置为第一页
  getBookList();
};

// 处理搜索
const handleSearch = () => {
  query.pageNum = 1; // 搜索时重置为第一页
  getBookList();
};

onMounted(() => {
  // 获取存储的用户信息
  const phone = localStorage.getItem("userPhone");
  const time = localStorage.getItem("loginTime");
  if (phone) {
    userPhone.value = phone;
  }
  if (time) {
    loginTime.value = new Date(time).toLocaleString();
  } else {
    loginTime.value = new Date().toLocaleString();
  }
  // 页面加载后立即获取图书列表
  getBookList();
});

const logout = () => {
  // 清除本地存储
  localStorage.removeItem("token");
  localStorage.removeItem("userPhone");
  localStorage.removeItem("loginTime");
  ElMessage.success("退出登录成功");
  // 跳转到登录页
  router.push("/login");
};
</script>

<style scoped>
/* 保留原有的样式 */
.home-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.title {
  color: white;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.user-info {
  display: flex;
  align-items: center;
}
.main-content {
  width: 100%;
  padding: 20px;
}
.welcome-card,
.feature-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}
.card-header .el-icon {
  font-size: 20px;
}
.user-profile {
  padding: 20px 0;
}
:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}
:deep(.el-descriptions__content) {
  color: #303133;
}
:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}
:deep(.el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
:deep(.el-card__header) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
}

/* 新增样式 */
.search-form {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
.book-list-container {
  padding-top: 20px;
}
</style>
